<script setup>
import { ref } from 'vue'
import {userInfoService, userInfoUpdateService} from '@/api/user'
import {ElMessage} from "element-plus"

const formModel = ref({
  username: '',
  nickname: '',
  email: ''
})

const getUserInfo = async () => {
  const res = await userInfoService()
  formModel.value = res.data
}
getUserInfo()

// 表单元素规则校验
const rules = {
  nickname: [
    {required: true, message: '请输入昵称', trigger: 'blur'},
    {min: 1, max: 10, message: '请输入1-10个非空格字符', trigger: 'blur'}
  ],
  email: [
    {required: true, message: '请输入邮箱', trigger: 'blur'},
    {
      pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
      message: '邮箱格式不对',
      trigger: 'blur'
    }
  ]
}

const form = ref()
// 修改用户信息
const updateUserInfo = async () => {
  await form.value.validate()
  await userInfoUpdateService(formModel.value)
  ElMessage.success('修改成功')
  await getUserInfo()
}

</script>

<template>
  <PageContainer title="基本资料">
    <el-form ref="form" :model="formModel" :rules="rules" label-width="100px" size="large"
             style="padding-right: 50%">
      <el-form-item prop="username" label="登录名称">
        <el-input disabled v-model="formModel.username"></el-input>
      </el-form-item>
      <el-form-item prop="nickname" label="用户昵称">
        <el-input v-model="formModel.nickname"></el-input>
      </el-form-item>
      <el-form-item prop="email" label="用户邮箱">
        <el-input v-model="formModel.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateUserInfo">提交修改</el-button>
      </el-form-item>
    </el-form>
  </PageContainer>
</template>

<style scoped>

</style>
